<template>
    <view>
        <!-- pages/meal/index.wxml -->
        <view class="pages" :style="'padding-bottom:' + marginBottom + 'rpx;'">
            <van-tabs nav-class="nav-class" custom-class="custom-class" :active="active" @change="onChange" title-active-color="#333333" title-inactive-color="#999999">
                <van-tab title="单项套餐">
                    <view class="single flexbox" @tap="toBuymeal" :data-id="item.serviceId" v-for="(item, index) in singlemeallist" :key="index">
                        <view>
                            <image class="header" :src="item.headportrait"></image>
                        </view>

                        <view class="content">
                            <view class="centers">
                                <view class="text4">{{ item.stylistName }}</view>
                                <view class="job">总监</view>
                            </view>
                            <view class="text1 mt-12">特惠{{ item.categoryname }}{{ item.times }}次套餐</view>
                            <view class="text2 mt-12">原价{{ item.costprice / item.times }}元/次，现价{{ item.times }}次{{ item.price }}元</view>
                            <view class="text3 mt-12">
                                <text>¥{{ item.price }}</text>
                                <text>¥{{ item.costprice }}</text>
                            </view>
                        </view>
                    </view>
                </van-tab>
                <van-tab title="多项套餐">
                    <view class="multiterm flexbox" @tap="toBuymeal" :data-id="item.serviceId" v-for="(item, index) in bothwaysinglemeallist" :key="index">
                        <!-- <view class="onebox">仅剩1张</view> -->

                        <view>
                            <image class="header" :src="item.headportrait"></image>
                        </view>

                        <view class="content">
                            <view class="centers">
                                <view class="text4">{{ item.stylistName }}</view>
                                <view class="job">总监</view>
                            </view>
                            <view class="text1 mt-12">特惠{{ item.categoryname }}套餐</view>
                            <view class="text2 mt-12">{{ item.content }}</view>
                            <view class="text3 mt-12">
                                <text>¥{{ item.price }}</text>
                                <text>¥{{ item.costprice }}</text>
                            </view>
                        </view>
                    </view>
                </van-tab>
            </van-tabs>
        </view>
        <tabbar activeIdx="1"></tabbar>
    </view>
</template>

<script>
// pages/meal/index.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            active: 0,
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            marginBottom: app.globalData.marginBottom,
            singlemeallist: [],
            bothwaysinglemeallist: [],
            page: 1,
            type: 1
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.getMeal(1, this.page, false);
        this.getMeal(2, this.page, false);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.getMeal(this.type, 1, true);
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.setData({
            page: this.page + 1
        });
        this.getMeal(this.type, this.page, false);
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 获取套餐数据
        getMeal(e, page, show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .postObj('/package/getPackageByType', {
                    page: page,
                    size: 10,
                    type: e,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (e === 1) {
                        this.setData({
                            singlemeallist: page > 1 ? [...this.singlemeallist, ...res.data.data] : res.data.data
                        });
                    } else {
                        this.setData({
                            bothwaysinglemeallist: page > 1 ? [...this.bothwaysinglemeallist, ...res.data.data] : res.data.data
                        });
                    }

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                });
        },

        // 购买套餐
        toBuymeal(e) {
            const { id } = e.currentTarget.dataset;
            uni.navigateTo({
                url: '/pages/buymealdetails/index?id=' + id
            });
        },

        onChange() {
            console.log('占位：函数 onChange 未声明');
        }
    }
};
</script>
<style>
/* pages/meal/index.wxss */
page {
    background: #fbfbfb;
}

.pages {
    /* display: flex;
  justify-content: center;
  align-items: center; */
    padding: 0 40rpx;
}

.flexbox {
    display: flex;
    flex-wrap: nowrap;
    padding: 30rpx 22rpx;
    box-sizing: border-box;
    position: relative;
}

/* 单项套餐 */

.mt-12 {
    margin-top: 12rpx;
}

.single,
.multiterm {
    width: 670rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin-top: 20rpx;
    padding: 40rpx 20rpx 20rpx 30rpx;
}

.header {
    width: 160rpx;
    height: 180rpx;
}

.content {
    margin-left: 28rpx;
}

.job {
    padding: 0 10rpx;
    height: 32rpx;
    line-height: 32rpx;
    background: #ff8722;
    border-radius: 0px 4px 4px 4px;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    margin-left: 10rpx;
}

.text1 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 34rpx;
}

.text2 {
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 17px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /* 这里是超出几行省略 */
    overflow: hidden;
}

.text3 text:nth-child(1) {
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff1b0b;
    line-height: 22px;
}

.text3 text:nth-child(2) {
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #999999;
    line-height: 17px;
    text-decoration: line-through;
    margin-left: 18rpx;
}

.text4 {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
}

.mt-10 {
    margin-top: 10rpx;
}

.onebox {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 10rpx;
    height: 32rpx;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 32rpx;
    background: #ff8722;
    border-radius: 0px 5px 5px 5px;
}

/* 多项套餐 */
/* vant组件样式 */
.van-tab--active {
    font-size: 32rpx !important;
}

.van-tabs__line {
    background: #ff8722 !important;
}

.van-tabs__nav,
.custom-class,
.van-tabs__scroll--line {
    background: #fbfbfb !important;
}

.nav-class {
    margin: 0 100rpx;
}

/* .van-ellipsis{
  width: 202rpx !important;
  text-align: center;
} */
</style>
